<%--
  Created by IntelliJ IDEA.
  User: 徐洲
  Date: 2023/12/12
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>摆烂俱乐部</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
    <!-- owl carousel-->
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="favicon.png">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->


</head>
<body>
<%--  获取用户名--%>
<%String username = (String) session.getAttribute("username");%>
<!-- navbar-->
<header class="header mb-5">
    <!--
    *** 头部 ***
    _________________________________________________________
    -->
    <jsp:include page="common/login.jsp"></jsp:include>

    <jsp:include page="common/top1.jsp"></jsp:include>
    <!-- Sraech -->
    <jsp:include page="common/search.jsp"></jsp:include>
</header>
<!-- *** TOP BAR END ***-->

<div id="all">
    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- breadcrumb-->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.jsp">家</a></li>
                            <li aria-current="page" class="breadcrumb-item active">个人账号</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-lg-3">
                    <!--
                    *** CUSTOMER MENU ***
                    _________________________________________________________
                    -->
                    <div class="card sidebar-menu">
                        <div class="card-header">
                            <h3 class="h4 card-title">个人</h3>
                        </div>
                        <div class="card-body">
                            <ul class="nav nav-pills flex-column">
                                <a href="user-account.jsp" class="nav-link"><i class="fa fa-user"></i> 个人信息</a>
                                <a href="article_collect.jsp" class="nav-link"><i class="fa fa-list"></i> 我的收藏</a>
                                <a href="user_pwd.jsp" class="nav-link active"><i class="fa fa-list"></i> 重置密码</a>
                                <a href="customer-orders.jsp" class="nav-link"><i class="fa fa-list"></i> 修改头像</a>
                                <a href="logout.jsp" class="nav-link"><i class="fa fa-sign-out"></i> 退出登录</a>
                            </ul>
                        </div>
                    </div>
                    <!-- /.col-lg-3-->
                    <!-- *** CUSTOMER MENU END ***-->
                </div>
                <div class="col-lg-9">
                    <div class="box">
<%--                        <h1>My account</h1>--%>
<%--                        <p class="lead">Change your personal details or your password here.</p>--%>
                        <h1>修改密码</h1>
                        <p class="lead">修改密码在这儿.</p>
                        <!-- 卡片区域 -->
                        <form id="repassword" action = "./user?action=changePassword" method="post">
                            <input name="username" id="username" type="hidden" value="<%= username%>">
                            <div class="form-group">
                                <label for="oldPwd">原密码</label>
                                <input type="password" name="oldPwd" id="oldPwd" required placeholder="请输入原密码" autocomplete="off" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label for="newPwd">新密码</label>
                                    <input type="password" name="newPwd" id="newPwd" required placeholder="请输入新密码" autocomplete="off" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label style="width: 100px" for="rePed">确认新密码</label>
                                    <input type="password" name="rePwd" id="rePed" required placeholder="请再次确认密码" autocomplete="off" class="form-control" />
                            </div>
                            <div class="col-md-12 text-center">
                                <button type="submit" name="submit" class="btn btn-primary"><i class="fa fa-save"></i> 保存新密码</button>
                                <button type="reset" class="btn btn-primary">重置</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--
    *** 版权 ***
    _________________________________________________________
    -->
<jsp:include page="common/copyright.jsp"></jsp:include>

<!-- JavaScript files-->
<script>
    document.getElementById('repassword').addEventListener('submit', function(e) {
        const oldPwd = document.getElementById('oldPwd').value;
        const newPwd = document.getElementById('newPwd').value;
        const rePwd = document.getElementById('rePed').value;

        // 检查新密码长度和包含数字和字母
        const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
        if (!passwordRegex.test(newPwd)) {
            alert("新密码必须包含至少一个字母和一个数字，且长度不少于6位");
            e.preventDefault();
            return;
        }

        // 检查新密码和确认密码是否相同
        if (newPwd !== rePwd) {
            alert("新密码和确认新密码不一致");
            e.preventDefault();
            return;
        }

        // 检查新密码和原密码是否相同
        if (newPwd === oldPwd) {
            alert("新密码不能与原密码相同");
            e.preventDefault();
            return;
        }
    });
</script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
<script src="js/front.js"></script>
</body>
</html>
